<template>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="page.pagenum" v-model:page-size="page.pagesize"
            :page-sizes="[10, 20, 50, 100]" :small="small" :disabled="disabled"
            layout="total, sizes, prev, pager, next" :total="page.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />

    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const currentPage4 = ref(4);
const pageSize4 = ref(10);
const small = ref(true);
const background = ref(false);
const disabled = ref(false);

const emit = defineEmits(['sendsize', 'sendpage']);


const handleSizeChange = (val) => {
    emit("sendsize", val);
};
const handleCurrentChange = (val) => {
    emit("sendpage", val);
};
defineProps({
    page: {
        pagenum: Number,
        pagesize: Number,
        total: Number
    }
});

</script>

<style scoped>
:deep(*){
    font-size: 16px;
}
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
:deep(.el-select--small .el-select__wrapper){
    background-color: #263343;
    box-shadow:none !important;
}
:deep(.el-select__placeholder),
:deep(.el-pagination__total){
    color: white !important;
}
:deep(.el-pagination button:disabled){
    background-color: #263343 !important;
}
:deep(.el-pagination--small .btn-prev),
:deep(.el-pagination--small .btn-next){
    background-color: #263343 !important;
    color: white;
}
:deep(.el-pager li){
    background-color: #263343;
    color: #999;
}
:deep(.el-pager li.is-active){
    color: white;
}
</style>
<style lang="less">
.demo-pagination-block {
    .el-select__selection {
        min-width: 60px !important;
    }
}
</style>